<template>
  <van-cell class="article_item" @click="toPage(articleData.art_id)">
    <!-- 标题 -->
    <div class="title van-multi-ellipsis--l2" slot="title">{{articleData.title}}</div>
    <!-- 左侧图片 -->
    <van-image
      class="right_img"
      slot="default"
      v-if="articleData.cover.type===1"
      fit="cover"
      :src="articleData.cover.images[0]"
    />
    <!-- 底部信息 -->
    <div slot="label">
      <!-- 中间图片 -->
      <div class="cover" v-if="articleData.cover.type===3">
        <div class="cover_item">
          <van-image
            v-for="(img,index) in articleData.cover.images"
            :key="index"
            fit="cover"
            :src="img"
          />
        </div>
      </div>
      <!-- 信息栏 -->
      <div class="article_info">
        <span>{{articleData.aut_name}}</span>
        <span>{{articleData.comm_count}}评论</span>
        <span>{{articleData.pubdate|relativeTime}}</span>
      </div>
      <!-- 底部栏 -->
      
    </div>
  </van-cell>
</template>

<script>
import JSONbig from 'json-bigint'
export default {
  name: "article_item",
  props: {
    articleData: {
      type: Object, //声明对象
      required: true //必须有，，否则报错
    }
  },
  methods: {
    toPage(id) {
      this.$router.push(`/article/${id}`);
    }
  },
  created() {}
  
};
</script>

<style scoped lang='less'>
.article_item {
  .title {
    font-size: 32px;
    color: #3a3a3a;
  }
  .van-cell__value {
    flex: unset;
    padding-left: 25px;
    .right_img {
      width: 235px;
      height: 148px;
    }
  }
  .cover_item {
    display: flex;
    .van-image {
      flex: 1;
      width: 232px;
      height: 146px;
      padding: 2px;
    }
  }
  .article_info {
    margin-top: 30px;
    span {
      margin: 0 10px;
    }
  }
}
</style>